<template>
  <el-dialog
    title="订单详情"
    :visible.sync="visible"
    fullscreen
    :before-close="handleClose"
    class="order-detail-dialog"
  >
    <div v-if="orderData" class="order-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="card-title">基本信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">订单号：</span>
              <span class="value">{{ orderData.order_no }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">订单状态：</span>
              <el-tag 
                v-if="orderData.status === 'pending'" 
                type="warning">待付款</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'paid'" 
                type="primary">待确认</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'shipped'" 
                type="success">已确认</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'completed'" 
                type="success">已完成</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'cancelled'" 
                type="info">已取消</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'refunding'" 
                type="warning">退款中</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'refunded'" 
                type="danger">已退款</el-tag>
              <el-tag 
                v-else-if="orderData.status === 'refund_failed'" 
                type="danger">退款失败</el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">创建时间：</span>
              <span class="value">{{ formatDateTime(orderData.create_time) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">支付时间：</span>
              <span class="value">{{ orderData.payment_time ? formatDateTime(orderData.payment_time) : '未支付' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">旅游产品：</span>
              <span class="value">{{ orderData.travel_name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">出发日期：</span>
              <span class="value">{{ orderData.travel_date }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 用户信息 -->
      <el-card class="detail-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="card-title">用户信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">下单用户：</span>
              <span class="value">{{ orderData.user?.nickname || '未知用户' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">联系人：</span>
              <span class="value">{{ orderData.contact_name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">联系电话：</span>
              <span class="value">{{ orderData.contact_phone }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 人数信息 -->
      <el-card class="detail-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="card-title">人数信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">成人数量：</span>
              <span class="value">{{ orderData.adult_count }}人</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">儿童数量：</span>
              <span class="value">{{ orderData.child_count }}人</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">单房差数量：</span>
              <span class="value">{{ orderData.room_count }}间</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 酒店信息 -->
      <el-card class="detail-card" shadow="never" v-if="orderData.hotel_level_name">
        <div slot="header" class="card-header">
          <span class="card-title">酒店信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">酒店级别：</span>
              <span class="value">{{ orderData.hotel_level_name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">酒店费用：</span>
              <span class="value">¥{{ orderData.hotel_level_amount || 0 }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 费用明细 -->
      <el-card class="detail-card" shadow="never">
        <div slot="header" class="card-header">
          <span class="card-title">费用明细</span>
        </div>
        
        <!-- 成人费用 -->
        <div v-if="getAdultItems(orderData).length > 0" class="fee-section">
          <h4>成人费用</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">成人单价：</span>
                <span class="value">¥{{ getAdultItems(orderData)[0]?.price || 0 }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">成人数量：</span>
                <span class="value">{{ getAdultItems(orderData).length }}人</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">成人小计：</span>
                <span class="value highlight">¥{{ getAdultTotal(orderData, 'adult') }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 儿童费用 -->
        <div v-if="getChildItems(orderData).length > 0" class="fee-section">
          <h4>儿童费用</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">儿童单价：</span>
                <span class="value">¥{{ getChildItems(orderData)[0]?.price || 0 }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">儿童数量：</span>
                <span class="value">{{ getChildItems(orderData).length }}人</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">儿童小计：</span>
                <span class="value highlight">¥{{ getChildTotal(orderData, 'child') }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 单房差费用 -->
        <div v-if="orderData.single_price_diff > 0" class="fee-section">
          <h4>单房差费用</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">单房差价格：</span>
                <span class="value">¥{{ orderData.single_price_diff }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">单房差数量：</span>
                <span class="value">{{ orderData.room_count }}间</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">单房差小计：</span>
                <span class="value highlight">¥{{ orderData.single_room_diff_amount || 0 }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 佣金信息 -->
        <div class="fee-section">
          <h4>佣金信息</h4>
          <el-row :gutter="20">
            <el-col :span="8" v-if="orderData.travel_share_price > 0">
              <div class="detail-item">
                <span class="label">成人佣金：</span>
                <span class="value">¥{{ orderData.travel_share_price }}</span>
              </div>
            </el-col>
            <el-col :span="8" v-if="orderData.travel_share_price2 > 0">
              <div class="detail-item">
                <span class="label">儿童佣金：</span>
                <span class="value">¥{{ orderData.travel_share_price2 }}</span>
              </div>
            </el-col>
            <el-col :span="8" v-if="orderData.prepay_amount > 0">
              <div class="detail-item">
                <span class="label">经纪人代付：</span>
                <span class="value">¥{{ orderData.prepay_amount }}</span>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 总计信息 -->
        <div class="fee-section total-section">
          <h4>总计信息</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">实付金额：</span>
                <span class="value highlight">¥{{ orderData.payment_amount || 0 }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <span class="label">实际收入：</span>
                <span class="value highlight">¥{{ orderData.payment_amount - orderData.travel_share_price * orderData.adult_count - orderData.travel_share_price2 * orderData.child_count }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 退款信息 -->
      <el-card class="detail-card" shadow="never" v-if="orderData.status === 'refunding' || orderData.status === 'refunded' || orderData.status === 'refund_failed'">
        <div slot="header" class="card-header">
          <span class="card-title">退款信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">退款金额：</span>
              <span class="value refund">¥{{ orderData.refund_amount || 0 }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">退款理由：</span>
              <span class="value">{{ orderData.refund_reason || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">退款备注：</span>
              <span class="value">{{ orderData.refund_remark || '无' }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="label">退款结果：</span>
              <span class="value">{{ orderData.refund_result || '无' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 订单项目详情 -->
      <el-card class="detail-card" shadow="never" v-if="orderData.travelOrderItems && orderData.travelOrderItems.length > 0">
        <div slot="header" class="card-header">
          <span class="card-title">出行人员</span>
        </div>
        <el-table :data="orderData.travelOrderItems" border stripe>
          <el-table-column prop="traveler_name" label="游客姓名" width="120"></el-table-column>
          <el-table-column prop="traveler_type" label="游客类型" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.traveler_type === 'adult' || scope.row.traveler_type === '成人'" type="primary">成人</el-tag>
              <el-tag v-else-if="scope.row.traveler_type === 'child' || scope.row.traveler_type === '儿童'" type="success">儿童</el-tag>
              <el-tag v-else type="info">{{ scope.row.traveler_type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="traveler_id_card" label="身份证号" width="180"></el-table-column>
          <el-table-column prop="traveler_phone" label="联系电话" width="130"></el-table-column>
          <el-table-column prop="price" label="单价" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.price || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="150"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "TravelOrderDetail",
  data() {
    return {
      visible: false,
      orderData: null
    }
  },
  methods: {
    open(data) {
      this.orderData = data;
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.orderData = null;
    },
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    
    // 获取成人项目列表
    getAdultItems(row) {
      if (!row.travelOrderItems || !Array.isArray(row.travelOrderItems)) {
        return [];
      }
      return row.travelOrderItems.filter(item => 
        item.traveler_type === 'adult' || 
        item.traveler_type === '成人' ||
        (item.traveler_type && item.traveler_type.toLowerCase().includes('adult'))
      );
    },
    
    // 获取儿童项目列表
    getChildItems(row) {
      if (!row.travelOrderItems || !Array.isArray(row.travelOrderItems)) {
        return [];
      }
      return row.travelOrderItems.filter(item => 
        item.traveler_type === 'child' || 
        item.traveler_type === '儿童' ||
        (item.traveler_type && item.traveler_type.toLowerCase().includes('child'))
      );
    },
    
    // 计算成人总价
    getAdultTotal(row, type) {
      const items = this.getAdultItems(row);
      if (items.length === 0) return 0;
      
      // 如果所有成人项目价格相同，使用第一个价格
      const price = items[0].price || 0;
      return (price * items.length).toFixed(2);
    },
    
    // 计算儿童总价
    getChildTotal(row, type) {
      const items = this.getChildItems(row);
      if (items.length === 0) return 0;
      
      // 如果所有儿童项目价格相同，使用第一个价格
      const price = items[0].price || 0;
      return (price * items.length).toFixed(2);
    }
  }
}
</script>

<style scoped lang="scss">
.order-detail-dialog {
  .order-detail {
    .detail-card {
      margin-bottom: 20px;
      
      .card-header {
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
      
      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        
        .label {
          color: #606266;
          min-width: 100px;
          font-weight: 500;
        }
        
        .value {
          color: #303133;
          font-weight: 400;
          
          &.highlight {
            color: #E6A23C;
            font-weight: 600;
          }
          
          &.refund {
            color: #F56C6C;
            font-weight: 600;
          }
        }
      }
      
      .fee-section {
        margin-bottom: 20px;
        
        h4 {
          margin: 0 0 15px 0;
          color: #303133;
          font-size: 14px;
          font-weight: 600;
          border-bottom: 1px solid #EBEEF5;
          padding-bottom: 8px;
        }
        
        &.total-section {
          background-color: #f8f9fa;
          padding: 15px;
          border-radius: 4px;
          
          h4 {
            color: #E6A23C;
            border-bottom-color: #E6A23C;
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>